<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <style>
        input{
            width: 600px;
            height: 40px;
            line-height: 40px;
            font-size: 30px;
            font-weight: 700;
        }

    </style>
</head>
<body>
    <h1>请输入您的银行卡号:</h1>
    <hr>
    <input type="text" id="bankCard" maxlength="23">

    <script>
        var input = document.getElementById('bankCard');
        //判断是否是IE  绑定不同的事件
        if (document.all) {
            input.onpropertychange = inputValue;
        } else{
            input.oninput = inputValue;
        }

        //自动截断的函数
        function inputValue(){
            //将范围限定在 只能输入数字
            input.value = input.value.replace(/\D/g,'').replace(/(\d{4})(?=\d)/g,'$1 ');
        }

        /*
        ?:  忽略子模式的匹配
        ?=  正向预查/先行断言   参与匹配,不参与返回结果
            匹配过程中需要匹配该条件,拿匹配结果时,忽略该条件

         */


    </script>
</body>
</html>